<template>
  <div class="in-wrap">
    <!-- 公共头引入 -->
    <header id="header" :class="{ 'mobile-header': isMobile }">
      <section class="container" :class="{ 'mobile-container': isMobile }">
        <div class="header-content">
          <h1 id="logo">
            <a href="#" title="智慧教育">
              <img src="~/assets/img/logo.png" width="100%" alt="智慧教育">
            </a>
          </h1>
          <div class="h-r-nsl">
            <ul class="nav">
              <router-link to="/" tag="li" active-class="current" exact>
                <a>首页</a>
              </router-link>
              <router-link to="/course" tag="li" active-class="current">
                <a>课程</a>
              </router-link>
              <router-link to="/teacher" tag="li" active-class="current">
                <a>名师</a>
              </router-link>
              <!-- <router-link to="/article" tag="li" active-class="current">
                <a>文章</a>
              </router-link> -->
              <router-link to="/chat" tag="li" active-class="current">
                <a>AI问答</a>
              </router-link>
              <router-link to="/practice" tag="li" active-class="current">
                <a>刷题</a>
              </router-link>
            </ul>
            <!-- / nav -->
            <ul class="h-r-login">
              <li v-if="!isLogin" id="no-login">
                <a href="/login" title="登录" @click="handleAuthLinkClick">
                  <em class="icon18 login-icon">&nbsp;</em>
                  <span class="vam ml5">登录</span>
                </a>
                |
                <a href="/register" title="注册" @click="handleAuthLinkClick">
                  <span class="vam ml5">注册</span>
                </a>
              </li>
              <li v-if="isLogin" id="is-login-one" class="mr10">
                <a id="headerMsgCountId" href="#" title="消息">
                  <em class="icon18 news-icon">&nbsp;</em>
                </a>
                <q class="red-point" style="display: none">&nbsp;</q>
              </li>
              <li v-if="isLogin" id="is-login-two" class="h-r-user">
                <a href="/ucenter" title>
                  <img
                    :src="loginInfo.avatar"
                    width="30"
                    height="30"
                    class="vam picImg"
                    alt
                  >
                  <span id="userName" class="vam disIb">{{ loginInfo.nickname }}</span>
                </a>
                <a href="javascript:void(0);" title="退出" @click="logout()" class="ml5">退出</a>
              </li>
            </ul>
            <!-- 移动端搜索框 -->
            <aside v-if="false" class="h-r-search" :class="{ 'mobile-search': isMobile }">
              <form action="#" method="post">
                <label class="h-r-s-box">
                  <input type="text" placeholder="输入你想学的课程" name="queryCourse.courseName" value>
                  <button type="submit" class="s-btn">
                    <em class="icon18">&nbsp;</em>
                  </button>
                </label>
              </form>
            </aside>
          </div>
          <!-- 移动端搜索按钮 -->
          <aside v-if="false" class="mobile-search-btn-wrapper" @click="toggleMobileSearch">
            <div class="mobile-search-icon">
              <em class="icon18 search-icon">&nbsp;</em>
            </div>
          </aside>
          
          <!-- 桌面端搜索框 -->
          <aside v-if="!isMobile" class="h-r-search" :class="{ 'mobile-search': isMobile }">
            <form action="#" method="post">
              <label class="h-r-s-box">
                <input type="text" placeholder="输入你想学的课程" name="queryCourse.courseName" value>
                <button type="submit" class="s-btn">
                  <em class="icon18">&nbsp;</em>
                </button>
              </label>
            </form>
          </aside>
          
          <!-- 移动端菜单按钮 -->
          <!-- <aside v-if="isMobile && !showMobileSearch" class="mw-nav-btn" @click="toggleMobileMenu">
            <div class="mw-nav-icon"></div>
          </aside> -->
          <div class="clear"></div>
        </div>
      </section>
    </header>

    <!-- /公共头引入 -->
    <nuxt/>

    <!-- 公共底引入 -->
    <footer id="footer">
      <section class="container"  v-if="!isMobile">
        <div class>
          <h4 class="hLh30">
            <span class="fsize18 f-fM c-999">友情链接</span>
          </h4>
          <ul class="of flink-list">
            <li>
              <a href="http://www.szytech.com/" title="数智云信息" target="_blank">数智云信息</a>
            </li>
          </ul>
          <div class="clear"></div>
        </div>
        <div class="b-foot">
          <section class="fl col-7">
            <section class="mr20">
              <section class="b-f-link">
                <a href="#" title="关于我们" target="_blank">关于我们</a>|
                <a href="#" title="联系我们" target="_blank">联系我们</a>|
                <a href="#" title="帮助中心" target="_blank">帮助中心</a>|
                <a href="#" title="资源下载" target="_blank">资源下载</a>|
                <span>服务热线：18556970729</span>
                <span>gedonshen@163.com</span>
              </section>
              <section class="b-f-link mt10">
                <span>©2025 数智云信息</span>
              </section>
            </section>
          </section>
          <aside class="fl col-3 tac mt15">
            <section class="gf-tx">
              <span>
                <img src="~/assets/img/wb-icon.png" alt>
              </span>
            </section>
          </aside>
          <div class="clear"></div>
        </div>
      </section>
      <div class="bgf5" v-if="isMobile">
        <section class="container">
          <section class="i-article">
            <div class="i-art-title">
              <h1>智慧教育</h1>
            </div>
            <div class="i-art-content">
              <p>欢迎来到智慧教育平台！</p>
            </div>
          </section>
        </section>
      </div>
    </footer>
    <!-- /公共底引入 -->
    
    <!-- 移动端搜索弹窗 -->
    <div 
      v-if="false" 
      :class="['mobile-search-overlay', { 'show': showMobileSearch }]" 
      @click="toggleMobileSearch"
      @transitionend="onTransitionEnd"
    >
      <div class="mobile-search-box" @click.stop>
        <form action="#" method="post">
          <input 
            type="text" 
            placeholder="输入你想学的课程" 
            name="queryCourse.courseName" 
            v-model="mobileSearchText"
            @keyup.enter="submitMobileSearch"
            autofocus
          >
          <button type="button" class="mobile-search-btn" @click="submitMobileSearch">
            <em class="icon18">&nbsp;</em>
          </button>
        </form>
      </div>
    </div>    
    
   
  </div>
</template>

<script>
import '~/assets/css/theme.css'
// 移除了不存在的owl.carousel.css导入
import '~/assets/css/web.css'
import '~/assets/css/base.css'
import cookie from 'js-cookie'
import loginApi from '@/api/login'

export default {
  data() {
    return {
      isLogin: false,
      loginInfo: {},
      isMobile: false,
      showMobileSearch: false,
      mobileSearchText: '',
      mobileMenuVisible: false // 控制移动端菜单模态框显示
    }
  },
  created() {
    // 检测是否为移动端
    this.checkIsMobile()
  },
  mounted() {
    // 监听窗口大小变化
    window.addEventListener('resize', this.checkIsMobile)
    
    this.showInfo()
  },
  beforeDestroy() {
    // 移除事件监听器
    if (process.client) {
      window.removeEventListener('resize', this.checkIsMobile)
    }
  },
  methods: {
    checkIsMobile() {
      // 确保只在客户端执行
      if (process.client) {
        // 检查屏幕宽度是否小于768px
        const wasMobile = this.isMobile
        this.isMobile = window.innerWidth < 768
        
        // 如果从桌面端切换到移动端且搜索框开着，关闭它
        if (this.isMobile && !wasMobile) {
          this.showMobileSearch = false
          this.showMobileMenu = false
        }
      }
    },
    
    onTransitionEnd(e) {
      // 当过渡结束且overlay被隐藏时，重置搜索文本
      if (!this.showMobileSearch && e.propertyName === 'opacity') {
        this.mobileSearchText = ''
      }
    },
    showInfo() {
      // 从cookie中读取用户信息
      const userInfoStr = cookie.get('userInfo')
      
      if (userInfoStr) {
        // 解析用户信息
        const userInfo = JSON.parse(userInfoStr)
        
        // 判断用户是否已登录（有token且未过期）
        if (userInfo && userInfo.token) {
          this.isLogin = true
          this.loginInfo = userInfo
        }
      } else {
        // 检查是否有we_ucenter cookie (来自登录页面)
        const weUserInfoStr = cookie.get('we_ucenter')
        if (weUserInfoStr) {
          const weUserInfo = JSON.parse(weUserInfoStr)
          this.isLogin = true
          this.loginInfo = weUserInfo
        }
      }
    },
    
    logout() {
      // 调用登出接口
      loginApi.logout().then(response => {
        // 清除cookie中的用户信息
        cookie.remove('userInfo')
        
        // 跳转到登录页面
        window.location.href = '/login'
      })
    },
    
    toggleMobileSearch() {
      this.showMobileSearch = !this.showMobileSearch
      // 如果关闭搜索，则重置搜索文本
      if (!this.showMobileSearch) {
        this.mobileSearchText = ''
      }
    },
    
    submitMobileSearch() {
      // 这里可以添加搜索逻辑
      console.log('搜索:', this.mobileSearchText)
      // 可以添加跳转到搜索结果页面的逻辑
      if (this.mobileSearchText.trim()) {
        // 模拟搜索跳转
        console.log('执行搜索:', this.mobileSearchText)
      }
      // 隐藏搜索框
      this.toggleMobileSearch()
    },
    
    toggleMobileMenu() {
      // 可以添加移动端菜单展开/收起的逻辑
      console.log('打开菜单')
      this.mobileMenuVisible = !this.mobileMenuVisible;
    },
    
    handleAuthLinkClick(event) {
      // 阻止事件冒泡，防止触发搜索框弹出
      event.stopPropagation()
      // 关闭菜单
      this.mobileMenuVisible = false;
    },
    
    handleMenuSearch() {
      // 处理菜单中的搜索
      console.log('菜单中搜索:', this.mobileSearchText);
      // 可以添加跳转到搜索结果页面的逻辑
      if (this.mobileSearchText.trim()) {
        // 模拟搜索跳转
        console.log('执行搜索:', this.mobileSearchText);
      }
      // 隐藏菜单
      this.toggleMobileMenu();
      // 重置搜索文本
      this.mobileSearchText = '';
    }
  }
}
</script>
<style scoped>
/* 移动端 header 样式 */
@media (max-width: 768px) {
  .h-r-search,
  .h-r-login,
  .nav {
    display: none !important;
  }
  
  .mw-nav-btn {
    display: block;
    position: fixed;
    top: 15px;
    right: 15px;
    z-index: 1002;
  }
  
  #header {
    height: 60px;
    padding: 10px 0;
  }
  
  #logo img {
    height: 40px;
  }
  
  .h-r-nsl {
    padding-right: 50px;
  }
  
  .comm-title-all {
    padding: 10px 15px;
    text-align: center;
  }
  
  .mr30 {
    margin-right: 0;
  }
  
  .course-list li {
    width: 100%;
    margin-right: 0;
  }
  
  .chat-container {
    border-radius: 0;
    margin: 0;
    height: calc(100vh - 60px);
  }
  
  .chat-messages {
    max-height: calc(100vh - 180px);
  }
}

/* 移动端菜单模态框样式 */
  .mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1001;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    padding-top: 70px;
    padding-right: 15px;
    padding-bottom: 15px;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none; /* 默认不拦截事件 */
    overflow: hidden;
  }
  
  .mobile-menu-overlay.visible {
    opacity: 1;
    pointer-events: auto; /* 显示时拦截事件 */
  }
  
  .mobile-menu-container {
    background: #ffffff;
    width: 80%;
    max-width: 300px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    border: 1px solid #eee;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    position: relative;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    margin-left: auto;
  }
  
  .mobile-menu-overlay.visible .mobile-menu-container {
    transform: translateX(0);
  }
  
  /* 确保在移动端正确显示 */
  @media (max-width: 768px) {
    .mobile-menu-overlay {
      align-items: flex-start !important;
    }
    
    .mobile-menu-container {
      margin-top: 10px;
    }
  }
}

/* 添加悬浮框样式和背景颜色 */
.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* 添加半透明黑色背景 */
  z-index: 1001;
  display: flex;
  justify-content: flex-end;
  align-items: center; /* 垂直居中 */
  padding: 30px; /* 添加内边距以实现悬浮效果 */
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.mobile-menu-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

.mobile-menu-container {
  background: #ffffff;
  width: 80%;
  max-width: 300px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
  border: 1px solid #eee;
  transform: scale(0.9); /* 初始缩小效果 */
  transition: transform 0.3s ease, opacity 0.3s ease;
  position: relative;
  max-height: calc(100vh - 60px);
  overflow-y: auto;
  margin: auto; /* 居中对齐 */
}

.mobile-menu-overlay.visible .mobile-menu-container {
  transform: scale(1); /* 显示时恢复正常大小 */
}
